<template>
    <div class="topClass">
        <el-text style="font-weight: bold;">当前登录用户：
            <span class="userClass">{{ curUser }}</span>
        </el-text>
        <el-button type="primary" @click="dialogFormVisible = true">创建项目</el-button>
        <el-button type="danger" @click="this.$router.push('/')">注销</el-button>
        <el-dialog v-model="dialogFormVisible" title="创建项目">
            <el-form>
                <el-form-item label="项目名称">
                    <el-input v-model="createProjectName" placeholder="请输出项目名称" autocomplete="off" />
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="dialogFormVisible = false">取消</el-button>
                    <el-button type="primary" @click="createProject">创建</el-button>
                </span>
            </template>
        </el-dialog>
    </div>
    <el-tabs type="border-card">
        <div v-if="Object.keys(project).length === 0">
            <h2>您还没有创建项目呀，请创建项目</h2>
        </div>
        <div v-for="(value, key) in project" :key="key">
            <el-tab-pane :label=key>
                <el-timeline>
                    <el-timeline-item timestamp="今日进度" type="info" placement="top">
                        <el-card>
                            <el-input v-model="curTodaycontext" type="textarea"></el-input>
                            <el-button style="margin-top: 5px;" type="primary" @click="submitContent(key)">提交</el-button>
                        </el-card>
                    </el-timeline-item>
                </el-timeline>
                <el-timeline>
                    <el-timeline-item :timestamp="itemKey" type="primary" v-for="(itemValue, itemKey) in value"
                        :key="itemKey" placement="top">
                        <el-card>
                            <!-- 输入区域支持换行 -->
                            <p style="white-space: pre-wrap;">{{ itemValue }}</p>
                        </el-card>
                    </el-timeline-item>
                </el-timeline>
            </el-tab-pane>
        </div>
    </el-tabs>
</template>
<script>
const axios = require('axios')
import { reactive, ref } from '@vue/reactivity'
// import { computed } from '@vue/runtime-core';
import { ElMessage } from 'element-plus'
export default {
    data() {
        return {
            dialogFormVisible: ref(false),
            curTodaycontext: "",
            curUser: this.$route.query.user,
            createProjectName: ref(''),
            project: reactive({
                // "今天你push了吗":
                //     { "2024-01-19": "初始提交", "2024-01-18": "提交了后端", "2024-01-10": "提交了后端" }
                // ,
                // "消消乐":
                //     { "2024-01-19": "2024关", "2024-01-18": "1999关" },
            })
        }
    },
    methods: {
        createProject() {
            if (this.createProjectName === "") {
                ElMessage.error('项目名称不能为空')
            } else {
                const path = 'http://39.101.129.87:5001/create_project'
                let post_data = {
                    "project-name": this.createProjectName,
                    "user-name": this.curUser
                }
                let header = { headers: { 'Content-Type': 'application/json' } }
                axios.post(path, post_data, header).then(res => {
                    if (res.data.code === 0) {
                        ElMessage({ message: '项目创建成功', type: 'success' })
                        location.reload()
                    } else {
                        ElMessage({ message: '项目创建失败，项目名称已存在', type: 'error' })
                        this.dialogFormVisible = false
                    }
                }).catch(error => { console.error(error); });
            }
        },
        submitContent(key) {
            if (this.curTodaycontext === "") {
                ElMessage.error('输入内容不能为空')
            } else {
                const path = 'http://39.101.129.87:5001/add_progress'
                let post_data = {
                    "project-name": key,
                    "today-progress": this.curTodaycontext,
                    "user-name": this.curUser
                }
                let header = {
                    headers: {
                        'Content-Type': 'application/json'
                    }
                }
                axios
                    .post(path, post_data, header)
                    .then(res => {
                        if (res.data.code === 0) {
                            ElMessage({ message: '更新进度成功', type: 'success', })
                        }
                        location.reload()
                    })
                    .catch(error => {
                        console.error(error);
                    });
            }
        },
        getProject() {
            const path = 'http://39.101.129.87:5001/get_project'
            let post_data = {
                "user-name": this.curUser
            }
            let header = {
                headers: {
                    'Content-Type': 'application/json'
                }
            }
            axios
                .post(path, post_data, header)
                .then(res => {
                    this.project = res.data.projects;
                })
                .catch(error => {
                    console.error(error);
                });

        }

    },

    created() {
        this.getProject();
    }

}
</script>
<style>
.topClass {
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 45px;
}

.userClass {
    font-size: large;
    color: #c238ae;
}

/* .cardClass{
    display: flex;
    justify-content: space-between;
} */
/* .labelClass {
    margin-top: 10px;
} */
</style>